<template>
  <div class="userLoginPage">
    <h2 style="margin-bottom: 16px">创建应用</h2>
    <a-form
      :model="form"
      :style="{ width: '480px', margin: '0 auto' }"
      label-align="left"
      auto-label-width
      @submit="handleSubmit"
    >
      <a-form-item field="appName" label="应用名称">
        <a-input v-model="form.appName" />
      </a-form-item>
      <a-form-item field="appDesc" label="应用描述">
        <a-input v-model="form.appDesc" />
      </a-form-item>
      <a-form-item field="appIcon" label="应用图标">
        <a-input v-model="form.appIcon" />
      </a-form-item>
      <!--      todo 应用上传图标-->
      <!--      <a-form-item field="appIcon" label="应用图标">-->
      <!--        <PictureUploader-->
      <!--          :value="form.appIcon"-->
      <!--          :onChange="(value) => (form.appIcon = value)"-->
      <!--        />-->
      <!--      </a-form-item>-->
      <a-form-item field="appType" label="应用类型">
        <a-select
          :style="{ width: '320px' }"
          placeholder="Please select ..."
          v-model="form.appType"
        >
          <a-option
            v-for="(value, key) of APP_TYPE_MAP"
            :key="key"
            :value="Number(key)"
            :label="value"
          >
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="scoringStrategy" label="评分策略">
        <a-select
          :style="{ width: '320px' }"
          placeholder="Please select ..."
          v-model="form.scoringStrategy"
        >
          <a-option
            v-for="(value, key) of METHOD_STRATEGY_MAP"
            :key="key"
            :value="Number(key)"
            :label="value"
          >
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <div
          style="
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
          "
        >
          <a-button type="primary" html-type="submit" style="width: 120px">
            提交
          </a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, watchEffect, withDefaults } from "vue";
import API from "@/api";
import { useRouter } from "vue-router";
import message from "@arco-design/web-vue/es/message";
import { APP_TYPE_MAP, METHOD_STRATEGY_MAP } from "@/constant/app";
import {
  addAppUsingPost,
  getAppVoByIdUsingGet,
  updateAppUsingPost,
} from "@/api/appController";

//接收路由的参数
interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return "";
  },
});

const router = useRouter();
const form = ref({
  appDesc: "",
  appIcon: "",
  appName: "",
  appType: 0,
  scoringStrategy: 0,
} as API.AppAddRequest);
const oldApp = ref<API.AppVO>();
const loadDate = async () => {
  if (!props.id) {
    return;
  }
  const res = await getAppVoByIdUsingGet({
    id: props.id as any,
  });
  if (res.data.code === 0 && res.data.data) {
    oldApp.value = res.data.data;
    form.value = res.data.data;
  } else {
    message.error("获取数据失败" + res.data.message);
  }
};

watchEffect(() => {
  loadDate();
});

const handleSubmit = async () => {
  //如果这个props.id存在说明是更新操作
  let res: any;
  if (props.id) {
    res = await updateAppUsingPost({
      id: props.id as any,
      ...form.value,
    });
    if (res.data.code === 0) {
      message.success("操作成功 两秒钟之后会自动跳转到应用详情页");
      setTimeout(() => {
        router.push(`/app/detail/${props.id}`);
      }, 2000);
    } else {
      message.error("操作失败" + res.data.message);
    }
  } else {
    res = await addAppUsingPost(form.value);
    if (res.data.code === 0) {
      message.success("操作成功，应用待审核");
      setTimeout(() => {
        router.push(`/`);
      }, 2000);
    } else {
      message.error("操作失败" + res.data.message);
    }
  }
};
</script>

<style scoped></style>
